<template>
    <navbar>
        <button class="navbar-toggler mobile-sidebar-toggler d-lg-none" type="button" @click="mobileSidebarToggle">
            &#9776;
        </button>
        <a class="navbar-brand"></a>
        <ul class="nav navbar-nav d-md-down-none">
            <li class="nav-item">
                <a class="nav-link navbar-toggler sidebar-toggler" style="color: #fff" @click="sidebarMinimize">&#9776;</a>
            </li>
        </ul>

        <!--<ul class="nav navbar-nav d-md-down-none">-->
            <!--<li class="nav-item header-item">-->
                <!--<router-link tag="div" to='/' style="height:55px;" class="nav-link">-->
                    <!--<p style="font-size: 14px"> 数据决策平台 </p>-->
                <!--</router-link>-->
            <!--</li>-->
        <!--</ul>-->

        <ul class="nav navbar-nav ml-auto">
            <Dropdown class="nav-item">
                <a href="javascript:void(0)">
                    <span slot="button">
                        <img src="static/img/avatars/user.png" class="img-avatar" alt="头像" style="width: 22px;height: 23px">
                        <span class="d-md-down-none" style="font-size: 14px;color: #fff">用户</span>
                    </span>
                </a>
                <Dropdown-menu slot="list">
                    <Dropdown-item>
                        <p class="dropdown-itemp">
                            <Icon type="alert"></Icon>
                            功能1<span class="badge badge-info">42</span></p>
                    </Dropdown-item>
                    <Dropdown-item>
                        <p class="dropdown-itemp">
                            <Icon type="chatbox-working"></Icon>
                            功能2
                        </p>
                    </Dropdown-item>
                    <Dropdown-item divided>
                        <p class="dropdown-itemp">
                            <Icon type="android-settings"></Icon>
                            设置
                        </p>
                    </Dropdown-item>
                    <Dropdown-item>
                        <a href="" @click="Logout">
                            <p class="dropdown-itemp">
                                <Icon type="power"></Icon>
                                退出
                            </p>
                        </a>
                    </Dropdown-item>
                </Dropdown-menu>
            </Dropdown>

            <li class="nav-item d-md-down-none">
                <!--<a class="nav-link navbar-toggler aside-menu-toggler"  @click="asideToggle">&#9776;</a>-->
            </li>
        </ul>
    </navbar>
</template>

<script>
    import navbar from './Navbar'

    export default {
        name: 'header',
        components: {
            navbar,
        },
        methods: {
            Logout(e) {
                e.preventDefault();
                this.$store.dispatch('LogOut').then(() => {
                    this.$router.push({path: '/login'});
                }).catch(err => {
                    this.$message.error(err);
                });
            },
            click() {
                // do nothing
            },
            sidebarToggle(e) {
                e.preventDefault()
                document.body.classList.toggle('sidebar-hidden')
            },
            sidebarMinimize(e) {
                e.preventDefault()
                document.body.classList.toggle('sidebar-minimized')
            },
            mobileSidebarToggle(e) {
                e.preventDefault()
                document.body.classList.toggle('sidebar-mobile-show')
            },
            asideToggle(e) {
                e.preventDefault()
                document.body.classList.toggle('aside-menu-hidden')
            }
        }
    }
</script>

<style type="text/css" scoped>
    .dropdown-itemp {
        text-align: left;
        font-size: 15px;
        padding: 10px;
    }
    .header-item {
        width: 130px;
        height: 55px;
        line-height: 55px;
    }
    .header-item a {
        color: #fff !important;
    }
</style>
